import { useState } from 'react'
import { Form, Input, Button, Checkbox, Typography } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import PasswordInput from '@/components/PasswordInput'
import { onLogin } from '@/apis'

const { Item } = Form

function Login() {
    const [loading, setLoading] = useState(false)

    const toLogin = (data) => {
        if(loading) {
            return Promise.reject(false)
        }
        setLoading(true)
        onLogin(data).then((res) => {
            console.log('login success', res);
            // 设置cookie
            window.location.href = '/home'
        })
        .catch(() => {})
        .finally(() => setLoading(false))
    }

    return <div className='flex h-screen items-center justify-center max-md:items-start'>
        <div className='p-16 w-[460px] bg-gray-50 rounded-md shadow-md max-md:w-screen max-md:rounded-none max-md:shadow-none max-md:bg-transparent max-md:p-4 max-md:text-lg' justify='space-around' align='middle'>

            <Typography.Title>登录</Typography.Title>
            <Form
                style={{ textAlign: 'left' }}
                layout="vertical"
                initialValues={{ remember: true }}
                onFinish={toLogin}>
                <Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: '请输入你的用户名' }]}
                >
                    <Input size='large' maxLength={64} prefix={<UserOutlined />} />
                </Item>

                <Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '你输入你的登录密码' }]}
                >
                    <PasswordInput />
                </Item>

                <Item name="remember" className='text-start' valuePropName="checked">
                    <Checkbox>Remember me</Checkbox>
                </Item>

                <Item>
                    <Button size='large' type="primary" htmlType="submit" block loading={loading}>
                        立即登录
                    </Button>
                </Item>
            </Form>
        </div>
    </div>;
}

export default Login